<template>
    <view class="change-mobile-container">
        <u-gap height="40" bg-color="#FFFFFF"></u-gap>
        <view class="valid-mobile" v-show="step === 1">
            <u-form :model="validMobileForm" ref="validMobileForm">
                <u-form-item label-position="top">
                    <u-input v-model="bindMobile" disabled label="已验证手机" placeholder="请输入手机号" maxlength="11" clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.img_code" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" clearable />
                    <u-button slot="right" type="error" size="mini" @click="sendValidMobileSms">{{ validMobilecodeTips }}</u-button>
                    <u-verification-code seconds="60" ref="vCode" @change="validMobileCode"></u-verification-code>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_mobile" class="u-m-20" type="error" shape="circle" @click="submitValMobileForm">提交校验</u-button>
        </view>
        <view class="change-mobile" v-show="step === 2">
            <u-form :model="changeMobileForm" ref="changeMobileForm">
                <u-form-item label-position="top">
                    <u-input v-model="changeMobileForm.mobile" placeholder="请输入新的手机号" maxlength="11" clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="changeMobileForm.img_code" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="changeMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" clearable />
                    <u-button slot="right" type="error" size="mini" @click="sendChangeMobileSms">{{ changeMobileCodeTips }}</u-button>
                    <u-verification-code seconds="60" ref="uCode" @change="changeMobileCode"></u-verification-code>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_change" class="u-m-20" type="error" shape="circle" @click="submitChangeForm">确认修改</u-button>
        </view>
        <view class="change-success u-flex" v-show="step === 3">
            <image class="icon-success" src="../static/images/member/icon-success.png"></image>
            <view class="success-title">
                您的手机号已成功更换为：
                <view>
                    {{ changeMobileForm.mobile }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import * as API_Common from '@/api/common.js'
    import * as API_Safe from '@/api/safe.js'
    import Cache, {
        Keys
    } from '@/utils/cache.js';
    import {
        Foundation,
        RegExp
    } from '@/ui-utils/index.js'
    export default {
        data() {
            return {
                uuid: Cache.getItem('uuid'),
                step: 1,
                validMobilecodeTips: '获取验证码',
                changeMobileCodeTips: '获取验证码',
                validMobileForm: {
                    img_code: '',
                    sms_code: ''
                },
                valid_img_url: '',
                changeMobileForm: {
                    mobile: '',
                    img_code: '',
                    sms_code: ''
                }
            };
        },
        onLoad() {
            this.$nextTick(this.getValidImgUrl)
            const mobile = Foundation.secrecyMobile(Cache.getItem('user').mobile);
            if(mobile == 'null'){
            	this.step = 2;
            }
        },
        computed: {
            bindMobile() {
                const mobile = Foundation.secrecyMobile(Cache.getItem('user').mobile);
                return mobile=='null'?"":mobile;
            },
            /** 校验手机号 按钮是否禁用 */
            val_disabled_mobile() {
                const {
                    img_code,
                    sms_code
                } = this.validMobileForm
                return !(img_code && sms_code)
            },
            /** 修改密码 按钮是否禁用 */
            val_disabled_change() {
                const {
                    mobile,
                    img_code,
                    sms_code
                } = this.changeMobileForm
                return !(mobile && img_code && sms_code)
            }
        },
        methods: {
            /** 获取图片验证码URL */
            getValidImgUrl() {
                this.valid_img_url = API_Common.getValidateCodeUrl(this.uuid, this.step === 1 ? 'VALIDATE_MOBILE' :
                    'BIND_MOBILE')
            },
            /** 发送手机验证码 */
            sendValidMobileSms() {
                const {
                    uuid
                } = this
                const {
                    img_code
                } = this.validMobileForm
                if (!img_code) {
                    this.$u.toast('请填写图片验证码')
                    return
                }
                if (this.$refs.vCode.canGetCode) {
                    API_Safe.sendMobileSms(uuid, img_code, "VALIDATE_MOBILE").then(res => {
                        this.$u.toast('验证码已发送')
                        this.$refs.vCode.start()
                    });
                } else {
                    this.$u.toast('倒计时结束后再发送')
                }
            },
            /** 修改手机号 发送验证码 */
            sendChangeMobileSms() {
                const {
                    uuid
                } = this
                const {
                    mobile,
                    img_code
                } = this.changeMobileForm
                if (!RegExp.mobile.test(mobile)) {
                    this.$u.toast('手机号码格式有误')
                    return
                }
                if (!img_code) {
                    this.$u.toast('请填写图片验证码')
                    return
                }
                if (this.$refs.uCode.canGetCode) {
                    API_Safe.sendBindMobileSms(mobile, img_code, uuid, "BIND_MOBILE").then(res => {
                        this.$u.toast('验证码已发送')
                        /** 通知验证码组件内部开始倒计时 */
                        this.$refs.uCode.start()
                    }).catch(this.getValidImgUrl);
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            validMobileCode(text) {
                this.validMobilecodeTips = text
            },
            changeMobileCode(text) {
                this.changeMobileCodeTips = text
            },
            /** 手机验证 */
            submitValMobileForm() {
                const {
                    sms_code
                } = this.validMobileForm
                API_Safe.validChangeMobileSms(sms_code).then(() => {
                    this.step = 2
                    this.getValidImgUrl()
                }).catch(this.getValidImgUrl)
            },
            /** 修改密码 */
            submitChangeForm() {
                const {
                    mobile,
                    sms_code
                } = this.changeMobileForm
                if (!RegExp.mobile.test(mobile)) {
                    this.$message.error('手机号码格式有误！')
                    return
                }
                API_Safe.changeMobile(mobile, sms_code).then(() => {
                    this.$u.toast('更换成功')
                    this.step = 3
                    this.changeMobileForm.mobile = mobile
                    var user = Cache.getItem(Keys.user);
                    user.mobile = mobile
                    Cache.setItem(Keys.user, user)
                }).catch(this.getValidImgUrl)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .change-mobile-container {

        .valid-mobile,
        .change-mobile {
            background-color: #FFFFFF;
            margin: 30rpx;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

            /deep/.u-label {
                flex: 0 0 180rpx !important;
            }
        }

        .change-success {
            padding-top: 100rpx;
            width: 100%;
            justify-content: center;

            .icon-success {
                width: 100rpx;
                height: 100rpx;
                margin-right: 30rpx;
            }

            .success-title {
                font-size: 32rpx;
                color: #333;
            }
        }
    }
</style>
